<template>
	<view>
		<c-nav-bar title="景点门票" :showHome="false"></c-nav-bar>
		<view :style="{'padding-top':mt+'px'}">
			<!-- 	<u-swiper :list="list" @change="e => currentNum = e.current" :autoplay="true" indicatorStyle="right: 20px"
				height='422rpx' style="margin-bottom: 30rpx;" :circular='true'>
			</u-swiper> -->


			<swiper class="swiper" :circular="true" :autoplay="true" :interval="8000" :duration="200"
				style="height: 422rpx;margin-bottom: 30rpx">
				<swiper-item class="swiper-items" v-for="item, index in list" :key="index"
					@tap="toLbDetails(item.route)">
					<image class="image" style="width: 100%; height: 100%;" :src="item.path" mode="scaleToFill"></image>
				</swiper-item>
			</swiper>


			<view class="jd_sticky" :style="{'top':mt+'px'}">
				<view class="searchCondition">
					<span class="item" @click="areaShow=true">
						<u-icon name="arrow-down-fill" size="19" :label="areaVal" labelPos="left"
							labelSize="13px"></u-icon>
					</span>
					<span class="item" @click="!areaShow?sortPrice():''">
						<u-icon name="arrow-down-fill" size="19" label="价格排序" labelPos="left" labelSize="13px"
							v-if="!pricesort"></u-icon>
						<u-icon name="arrow-up-fill" size="19" label="价格排序" labelPos="left" labelSize="13px" v-else
							customStyle="color:#007A69" labelColor="#007A69"></u-icon>
					</span>
					<span class="item" @click="!areaShow?sortDis():''">
						<u-icon name="arrow-down-fill" v-if="!dissort" size="19" label="距离最近" labelPos="left"
							labelSize="13px"></u-icon>
						<u-icon name="arrow-up-fill" size="19" label="距离最近" labelPos="left" labelSize="13px" v-else
							customStyle="color:#007A69" labelColor="#007A69"></u-icon>
					</span>
				</view>
				<!--  区域筛选 -->
				<view class="contentArea" v-show="areaShow">
					<view class="box">
						<view class="item" v-for="(item, index) in area" :key="index"
							@click="clickareaShow(item, index)" :class="item.checked?'on':''">
							<view class="contentpeice" :class="{'Doublactive': item.region}">
								{{item.scenicName}}
								<view class="xuanzhong" v-if="item.checked">
									<img src="https://i.ringzle.com/file/20240227/65d9cecc2770427e8185d922d57d1936.png"
										alt="">
								</view>
							</view>
						</view>
					</view>
					<view class="u-btn">
						<view @click="resetArea()">
							重置
						</view>
						<view @click="confirmArea()">
							确定
						</view>
					</view>
				</view>
			</view>
			<view class="list" v-if="indexList.length!=0">
				<u-cell class="spotList" @click="toHref(item)" v-for="(item, index) in indexList" :key="index">
					<u-avatar slot="icon" shape="square" size="212" :src="item.coverImage"
						customStyle="border-radius:10px"></u-avatar>
					<view class="right" slot="title">
						<view class="p1">{{item.scenicSpotName}}</view>
						<view class="p2">
							<text>距离{{item.distence}}</text><text>|</text></text><text>{{item.scenicName}}</text>
						</view>
						<view class="p3"><text>{{item.remark}}</text></view>
						<template v-if="item.startPrice!=-1">
							<view class="p4" v-if="item.startPrice!=0">
								<view class="money">￥</view>
								<view class="price">
									{{item.startPrice}}
								</view>
								起
							</view>
							<view class="p4" v-if="item.startPrice==0">
								免费
							</view>
						</template>
					</view>
				</u-cell>
			</view>
			<block v-else>
				<block v-if="showNoData">
					<NoData />
				</block>
			</block>
			<view class="cover" v-show="areaShow" @click="areaShow=false"></view>
			<uni-load-more :status="status" color="#007aff" />
		</view>
	</view>
</template>

<script>
	import uniLoadMore from '@/compoments/load-more/index.vue'
	import nodata from '@/compoments/NoData/index1.vue'
	export default {
		components: {
			nodata
		},
		data() {
			return {
				status: 'more', //加载状态
				passengerDefault: [0],
				currentNum: null,
				areaShow: false,
				mt: uni.getSystemInfoSync().statusBarHeight + 44,
				area: [{
					scenicName: '全部'
				}],
				titleStyle: {
					fontSize: '36rpx',
					fontWeight: "bold",
					color: "#333333"
				},
				areaVal: '区域',
				pricesort: 0, //降序
				dissort: 0,
				list: [
					{path:'https://fsy.shengsi.gov.cn/file/20240730/e7f3538114f447c2aa67b769043f3c7d.png',route:''}
				],
				indexList: [],
				fromData: {
					limit: 10,
					page: 1,
					sort: 1,
					scenicName: ''
				},
				lat: '',
				lon: '',
				showNoData: false
			}
		},
		onLoad() {
			this.getLbList();
			let that = this;
			this.getAddressList();
			uni.getLocation({
				type: 'wgs84',
				success: function(res) {
					that.lat = res.latitude;
					that.lon = res.longitude;
					that.getRoomsList()
				}
			});
		},
		//下拉刷新
		onPullDownRefresh() {},
		//上拉加载
		onReachBottom() {
			if (this.status != 'noMore') {
				this.status = 'loading'
				uni.showNavigationBarLoading()
				this.getRoomsList()
			}
		},

		methods: {
			toLbDetails(url) {
				if (!url) return
				if (uni.getStorageSync('spid_old')) uni.removeStorageSync('spid_old');
				if (uni.getStorageSync('price_old')) uni.removeStorageSync('price_old');
				uni.navigateTo({
					url
				})
			},
			getLbList() {
				this.$api.get('/sys/isappletpic/queryBannerByType/6').then(res => {
					if (res.data.code === 0) {

						let list = res.data.data.bannerList.map(b => {
							return {
								path: b.path,
								route: b.linkUri
							}

						});
						if (list.length > 0) this.list = list;
					}
				})
			},
			// 获取区域
			getAddressList() {
				this.$api.get("/api/hotel/selectScenicList").then((res) => {
					res.data.data.forEach(item => {
						this.area.push(
							item
						)
					})
					this.area.forEach((item, index) => {
						this.$set(this.area[index], 'checked', false)
					})
				});
			},
			// 区域筛选
			clickareaShow(e, i) {
				this.$set(this.area[i], 'checked', !this.area[i].checked)
				if (i == 0) {
					this.area.forEach((item, index) => {
						if (index > 0 && this.area[i].checked) {
							this.$set(this.area[index], 'checked', false)
						}
					})
				} else {
					this.$set(this.area[0], 'checked', false)
				}

			},
			confirmArea() {
				this.fromData.page = 1;
				let areas = this.area.map((item) => {
					if (item.checked) return item.scenicName
				})
				let newAreas = areas.filter((item) => item);
				this.fromData.scenicName = newAreas.join(',');
				if (this.fromData.scenicName == '全部') {
					this.fromData.scenicName = ''
				}
				this.indexList = [];
				this.getRoomsList();
				this.areaShow = false;
			},
			resetArea() {
				this.area.forEach((item, index) => {
					this.$set(this.area[index], 'checked', false)
				})
				this.fromData.scenicName = '';
			},
			returnBack() {
				uni.reLaunch({
					url: '/pages/index/index'
				})
			},
			getRoomsList() {
				this.$api.get('/api/scenic/page', this.fromData)
					.then(res => {
						if (res.data.data.list.length > 9) { //还有下一页数据
							this.fromData.page++;
							this.status = 'more'
						} else {
							this.status = 'noMore'
						}
						this.indexList = this.indexList.concat(res.data.data.list);
						this.indexList.forEach(d => {
							d.distence = this.getDistence(d.lat, d.lon)
						})
						uni.stopPullDownRefresh();
						uni.hideNavigationBarLoading()
						this.showNoData = true;
					})
			},
			//跳转详情
			toHref(item) {
				uni.removeStorageSync('spid_old');
				uni.removeStorageSync('price_old');
				uni.navigateTo({
					url: "/pagesTrip/scenicSpots/spotDetail?spid=" + item.ismapId + '&price=' + item.startPrice +
						'&isBuy=' + item.isBuy + '&islandName=' + item.scenicName
				})
			},
			//价格排序
			sortPrice() {
				this.pricesort = !this.pricesort;
				let type = this.pricesort;
				this.indexList.sort(function(a, b) {
					if (!type) { //降序
						return b.startPrice - a.startPrice;
					} else {
						return a.startPrice - b.startPrice; //	升序
					}
				});
			},
			//价格排序
			sortDis() {
				this.dissort = !this.dissort;
				let type = this.dissort;
				this.indexList.sort(function(a, b) {
					if (!type) { //降序
						return parseFloat(b.distence) - parseFloat(a.distence);
					} else {
						return parseFloat(a.distence) - parseFloat(b.distence); //	升序
					}
				});
			},
			getDistence(lat, lon) {
				var radLat1 = lat * Math.PI / 180.0;
				var radLat2 = this.lat * Math.PI / 180.0;
				var a = radLat1 - radLat2;
				var b = lon * Math.PI / 180.0 - this.lon * Math.PI / 180.0;
				var s = 2 * Math.asin(Math.sqrt(Math.pow(Math.sin(a / 2), 2) +
					Math.cos(radLat1) * Math.cos(radLat2) * Math.pow(Math.sin(b / 2), 2)));
				s = s * 6378.137; // EARTH_RADIUS;
				s = Math.round(s * 10000) / 10000;
				s = s * 1000
				if (isNaN(s)) {
					return 0 + 'm';
				}
				if (s > 1000) {
					//    大于1000米时
					s = Math.floor(s / 1000 * 100) / 100;
					s = s + 'km'
				} else {
					//    小于1000米直接返回
					s = s + 'm'
				}
				return s
			}
		}
	}
</script>
<style scoped lang="scss">
	::v-deep .list {
		.u-line {
			border-bottom-style: inherit !important
		}
	}

	.image {
		width: 212rpx;
		height: 212rpx;
		border-radius: 16rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 16rpx;
		}
	}

	.cover {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, .5);
	}

	.contentArea {
		width: 100%;
		padding: 48rpx 24rpx;
		box-sizing: border-box;
		position: relative;
		border-top: 1rpx solid #f3fefe;
		background-color: #fff;

		.box {
			display: grid;
			gap: 20rpx 12rpx;
			grid-template-columns: repeat(4, 1fr);

			.item {
				width: 166rpx;
				height: 68rpx;
				text-align: center;
				line-height: 68rpx;
				background-color: #F7F7FA;
				border: 2rpx solid #F7F7FA;
				color: #333;
				box-sizing: border-box;
				position: relative;
				border-radius: 12rpx;

				&.on {
					border: 2rpx solid #007A69;
					color: #007A69;
				}

				.xuanzhong {
					width: 30rpx;
					height: 25rpx;
					position: absolute;
					bottom: -1rpx;
					right: -1rpx;
					border-top-left-radius: 10rpx;
					background: #007A69;
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 10rpx 0 10rpx 0;

					img {
						width: 16rpx;
						height: 16rpx;
					}
				}
			}

		}

		.u-btn {
			display: flex;
			justify-content: space-between;
			gap: 0 30rpx;
			margin-top: 128rpx;

			view {
				width: 330rpx;
				height: 88rpx;
				text-align: center;
				line-height: 88rpx;
				border-radius: 44rpx;
				font-size: 30rpx;

				&:first-child {
					border: 1rpx solid #007A69;
					color: #007A69;
				}

				&:last-child {
					color: #fff;
					background: #007A69;
				}
			}
		}
	}

	.scenspots .nodatadiv {
		height: 40vh !important;
	}

	.uni-page-head {
		z-index: 1;
	}

	.u-sticky {
		top: 88rpx !important;
	}

	.jd_sticky {
		position: sticky;
		z-index: 999;
	}

	.searchCondition {
		// position: relative;
		background-color: #fff;
		// margin-top: 8rpx;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		padding: 30rpx 0;

		// height: 40rpx;
		.item {
			margin: 0 40rpx;

			.u-icon {
				justify-content: center;
			}
		}

	}


	.right {
		margin-left: 26rpx;

		.p1 {
			color: #111111;
			font-size: 32rpx;
			font-family: PingFang-SC-Bold, PingFang-SC;
			font-weight: bold;

		}

		.p2 {
			font-size: 24rpx;
			color: #777;
			margin: 20rpx 0 22rpx;

			text:nth-child(2) {
				display: inline-block;
				margin: 0 15rpx;
				font-size: 20rpx;
				color: #EFEFEF;
			}
		}

		.p3 {
			text {
				display: inline-block;
				padding: 6rpx;
				background-color: #fff6e6;
				font-size: 22rpx;
				color: #FF7D01;
				margin-bottom: 18rpx;
				border-radius: 4rpx;
			}
		}

		.p4 {
			display: flex;
			align-items: center;
			font-size: 28rpx;
			line-height: 30rpx;
			font-weight: bold;
			color: #FF4141;
			margin-right: 4rpx;
			font-family: Arial Bold, PingFang-SC-Bold, PingFang-SC;

			.money {
				font-size: 18rpx;
				color: #FF4141;
				margin-right: 4rpx;
			}

			.price {
				font-size: 30rpx;
				font-weight: bold;
				color: #FF4141;
				margin-right: 4rpx;
				font-family: Arial Bold, PingFang-SC-Bold, PingFang-SC;
				;
			}
		}
	}

	.areaBox {
		.tit {
			font-size: 32rpx;
			color: #333;
			text-align: center;
			margin-bottom: 40rpx;
			margin-top: 64rpx;
		}

		.area {
			padding: 0 24rpx 40rpx;
			background-color: #fff;
			display: grid;
			gap: 40rpx 26rpx;
			grid-template-columns: auto auto auto auto;
			margin-bottom: 44rpx;

			text-align: center;

			text {
				background-color: #F5F8FA;
				border-radius: 16rpx;
				font-size: 24rpx;
				color: #666;
				height: 64rpx;
				line-height: 64rpx;
				box-shadow: 0 5px 10px rgba(0, 0, 0, 0.08);

				&.on {
					background-image: linear-gradient(to right, #0EBFFE, #00D3E8);
					color: #fff;
				}
			}
		}

		.btns {
			display: grid;
			padding: 0 30rpx 40rpx;
			gap: 0 20rpx;
			grid-template-columns: auto auto;

			.u-button--large {
				width: 94%;
				height: 40px;
			}
		}
	}
</style>